<template>
  <div class="rightall">
    <!--<div style="width:100%;height:200px;border:1px solid red;">{{productlist}}</div>-->
    <table>
      <tr class="th">
        <th v-for="item of productListone.title" :key="item.id">{{item}}</th>
        <th></th>
      </tr>
        <tr v-for="item of productListone.data" :key="item.id" class="td">
          <td>{{item.bondCode}}</td>
          <td>{{item.bondShortName}}</td>
          <td>{{item.biddingRate}}</td>
          <td>{{item.planPublishAmount}}</td>
          <td>{{item.bondType}}</td>
          <td>{{item.bondTerm}}</td>
          <td><a>申购完成</a></td>
        </tr>
    </table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: '',
  computed: mapGetters([
    'productListone'
  ])
}
</script>

<style scoped type="text/stylus" lang="stylus">
.rightall table
  width:100%;
  .th
    background-color: #FAFAFD; width: 959px; height: 50px;border-bottom: 1px solid #F0F0F0;
    th
      color: #323232; font-size: 16px;width: 128px;height: 50px;text-align: center;
  .td
    background-color: #FAFAFD; height: 70px;border-bottom: 1px solid #F0F0F0;
    td
      text-align: center;
      a
        border: 1px solid #dcb366;background-color: #dcb366;border-radius: 5px;width: 80px;height: 30px;color: #FFFFFF;font-size:14px;display :block;line-height :35px
</style>
